<template>
  <transition name="dialog">
    <div v-if="visible" class="dialog-wrapper">
      <div class="dialog-overlay" @click="handleModalClose"></div>
      <div class="dialog-container" :style="{ width, height,top }">
        <div class="dialog-header">
          <h3>{{ title }}</h3>
          <button class="close-btn" @click="handleClose">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="dialog-body">
          <slot></slot>
        </div>
        <div class="dialog-footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { disableScroll, enableScroll } from '@/utils/scroll'

export default {
  name: 'Dialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '30%'
    },
    top: {
      type: String,
      default: '10%'
    },  
    height: {
      type: String,
      default: 'auto'
    },
    closeModal: {
      type: Boolean,
      default: true
    },
    closeOnEscape: {
      type: Boolean,
      default: true
    }
  },

  watch: {
    visible: {
      handler(newVal) {
        if (newVal) {
          if(this.closeModal){
            disableScroll()
          }
        } else {
          enableScroll()
        }
      },
      immediate: true
    }
  },

  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    handleModalClose() {
      if (this.closeModal) {
        this.$emit('update:visible', false)
      }
    },
    handleKeydown(e) {
      if (e.key === 'Escape' && this.closeModal) {
        this.handleClose()
      }
    }
  },

  beforeDestroy() {
    window.removeEventListener('keydown', this.handleKeydown)
    enableScroll()
  },

  mounted() {
    if (this.closeOnEscape) {
      window.addEventListener('keydown', this.handleKeydown)
    }
    
    const overlay = document.createElement('div')
    overlay.style.position = 'fixed'
    overlay.style.top = '-9999px'
    overlay.style.backdropFilter = 'blur(2px)'
    document.body.appendChild(overlay)
    setTimeout(() => document.body.removeChild(overlay), 100)
  }
}
</script>

<style lang="scss" scoped>
.dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  z-index: 1000;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  transition: opacity 0.2s;
}

.dialog-container {
  position: absolute;
  top: v-bind(top);
  background: var(--card-bg);
  border-radius: $border-radius-lg;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  max-width: 90%;
  max-height: 80vh;
  z-index: 1001;
  transform-origin: center;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
  overflow: hidden;
}

// 简化动画
.dialog-enter-active,
.dialog-leave-active {
  transition: opacity 0.2s ease-out;
  .dialog-container {
    transition: transform 0.2s ease-out;
  }
}

.dialog-enter,
.dialog-leave-to {
  opacity: 0;
  
  .dialog-container {
    transform: translateY(-20px) scale(0.95);
  }
}

.dialog-enter-to,
.dialog-leave {
  opacity: 1;
  
  .dialog-container {
    transform: translateY(0) scale(1);
  }
}

.dialog-header {
  padding: 20px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  h3 {
    font-size: 18px;
    line-height: 24px;
    color: var(--text-primary);
    font-weight: 500;
    margin: 0;
  }

  .close-btn {
    border: none;
    background: transparent;
    padding: 8px;
    margin: -8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    
    i {
      font-size: 16px;
      width: 16px;
      height: 16px;
      line-height: 16px;
      display: block;
      transition: transform 0.3s ease;
    }
    
    &:hover {
      background: var(--hover-bg);
      color: var(--primary-color);
      
      i {
        transform: rotate(180deg);
      }
    }
  }
}

.dialog-body {
  padding: 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}

.dialog-footer {
  padding: 20px;
  padding-top: 10px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
</style> 